<!DOCTYPE html>
<html>
	<head>
		<title>重庆理工_JQuery_Page</title>
		<!-- <script src="js/jquery.js" type="text/javascript"></script> -->
		<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
		<style>
			.red {
				color: red;
			}
		</style>
	</head>
	<body>
		<h3>This is jquery test page.</h3>
		<div class="outDiv">
			<p>
				<div id="div01" class="myDiv"><span>第一个 DIV</span></div>
			</p>
			<p>
				<div id="div02" name="div02" class="myDiv">第二个 DIV</div>
			</p>
			<p>
				<input type="hidden" name="userId" value="1"/>
			</p>
			<p>
				<input type="checkbox" name="myLove" value="love1"/> 爱好1
				<input type="checkbox" name="myLove" value="love2"/> 爱好2
				<input type="text" name="myInput" value="hujiang" />
			</p>

			<form id="myForm" action="javascript:void(0);" method="post">
				<input type="hidden" id="userId" name="userId" value="1" />
				<p>
					<label for="userName">用户名：</label>
					<input type="text" id="userName" name="userName" value="Hujiang" />
				</p>
				<p>
					<label for="password">密码：</label>
					<input type="password" id="password" name="password" value="111111" />
				</p>
				<p>
					<input type="hidden" name="cityId" value="1890">
				</p>
				<p>
					<input type="text" name="cityName" value="shanghai" readonly>
				</p>
				<p>
					<input type="text" name="localCityName" value="上海">
				</p>
				<button onclick="fun01()">btn01</button>
				<button id="btn02">btn02</button>
				<button id="btn03">新增用户</button>
				<button id="btn04">修改城市</button>
			</form>
		</div>

		<script>
			// 页面加载时候执行的函数
			$(function () {
				jqueryTest01();

				// 事件绑定
				$("#btn02").on("click", function() {
					fun02();
				});
				$("#btn03").click(function() {
					insertUser();
				});
				$("#btn04").click(function() {
					updateCity();
				})
			});

			function fun01() {
				alert("cdsacdascdascads");
			}
			function fun02() {
				location.href = "http://www.baidu.com";
				location.href
			}

			function updateCity() {
				$.ajax({
					url:"http://www.sfac.xyz/api/city",
					type:"put",
					contentType:"application/x-www-form-urlencoded",
					data: $("#myForm").serializeArray(),
					success: function(result) {
						if (result.status == 200) {
							alert(result.message);
							console.log(result.data);
						} else {
							alert(result.message);
						}
					},
					error: function(erro) {
						console.log(erro);
					}
				});
			}

			function insertUser() {
				var user = {};
				user.userName = $("#userName").val();
				user.password = $("#password").val();

				// 调用 ajax 函数，参数为 ajax 的配置属性对象
				$.ajax({
					url:"http://www.sfac.xyz/api/user",
					type:"post",
					contentType:"application/json",
					data: JSON.stringify(user),
					success: function(result) {
						if (result.status == 200) {
							alert(result.message);
							console.log(result.data);
						} else {
							alert(result.message);
						}
					},
					error: function(erro) {
						console.log(erro);
					}
				});
			}

			function jqueryTest01() {
				console.log($ == jQuery);

				// 选择器
				console.log($("#div01"));
				console.log($("#div01").html());
				console.log($("div"));
				console.log($(".myDiv"));
				console.log($("[name=div02]"));
				// div 1 显示隐藏域里面的值
				// $("#div01").html($("input[name=userId]").val());
				// 层级选择器
				console.log($("div.outDiv>p>input").val());
				// 过滤器
				console.log($("input:hidden").val());
				console.log($("#div01").text());
				console.log($("#div01").html());
				$("#div01").html("我爱你！中国，<span style='color:red;'>我想给您过一次农历的生日！</span>");
				// $("#div01").text("我爱你！中国，<span style='color:red;'>我想给您过一次农历的生日！</span>");

				// $("#div02").css("color", "red");
				$("#div02").addClass("red");
				$("#div02").hide();

				console.log($(window).width());
				console.log($(window).height());
				console.log($(document).width());
				console.log($(document).height());
				$("#div01").css("width", "500px")
					.css("height", "50px")
					.css("border", "solid 1px gray");
				console.log($("#div01").width());
				console.log($("#div01").height());
				$("#div01").attr("data", "hujiang");

				$("input[type=checkbox][value=love1]").attr("checked", "checked");
				$("input[type=checkbox][value=love2]").prop("checked", true);

				console.log($("[name=myLove]").attr("value"));
				console.log($("input[type=checkbox][value=love1]").attr("checked"));
				console.log($("input[type=checkbox][value=love1]").prop("checked"));

				$("#div01").append("<span style='coler:blue'>!!!!!!!!!</span>");

				var arr = ["cdsacda", 432, "cdsacdascdas", 543542];
				$.each(arr, function (i, item) {
					console.log(i + "----" + item);
				});


				console.log($("#myForm").serializeArray());
				var user = {
					userId: 1,
					userName:"hujiang",
					password:"111111",
				};
				console.log(JSON.stringify(user));
			}
		</script>
	</body>
</html>
